<template>
   
  <div v-show="loadingShow">
    <loading></loading>
  </div> 
  <router-view></router-view>
<div v-else>
  <!--子路由-->

  <div id="submitbox">
    <div class="bgf">

         <dl class="normal-bg-t">
             <dd class="carname" style="float:left"><span>服务车辆：</span><i>{{carModelInfo.carName}}</i></dd>           
         </dl>

         <dl class="normal-bg-t">
             <dd class="carname"><span>车牌号码：</span></dd>
             <dd v-if="carModelInfo.plates" class="server-car">
                <span class="gray">{{carModelInfo.plates}}</span>
             </dd>
             <dd v-else>
                <!-- <span class="seclect-plate-btn" v-link="{name:'confirm-order-carplate',query:{name:carPlate,type:plateType,pathfrom:'ordertyre'}}">{{carPlate}}</span> -->
                 
                <span class="seclect-plate-btn"  v-link="{path:'/ordertyre/ordercarplate',query:{name:carPlate,type:plateType,pathfrom:'confirm-order-tyre'}}">{{carPlate}}</span>

              <input class="plate-text" type="text" v-model="plateText" @blur="savePlate($event) | debounce 200" @keyup.enter="savePlate($event) | debounce 300" @keyup.32="savePlate($event) | debounce 300"  @input="savePlate($event) | debounce 300" style="text-transform : uppercase;" maxlength="7" placeholder="输入车牌号" />

             </dd>
         </dl>
         <!--联系人组件-->
         <confirm-order-custom :custname="userInfo.name" :mobilephone="userInfo.phone"></confirm-order-custom> 
         <!--门店组件-->
         <confirm-order-store :storeinfo="storeInfo.storeName"></confirm-order-store>
         <!--选择时间组件-->
         <confirm-order-picktime :choose-time ="chooseTime"></confirm-order-picktime>
    </div>

     <!--服务列表-->
    <ul class="normal-bg no-pd-r mt16" v-if="typeDetail.mdseName">
      <li>
      <h3>服务项目</h3>
       <p class="pr" v-if="typeDetail.mdseName">
        <span style="display:inline-block;width:25.4rem;">{{typeDetail.mdseName}} <i class="tyrenum">({{tyrenum}}条)</i></span>
        <span class="pa" style="bottom:0;right:1.5rem;"><i>¥</i>{{tyreMoney.toFixed(2)}}</span>
      </p>
      <p  v-if="typeDetailList.length>0" >
        <span>{{typeDetailList[0].mdseName}}</span>
        <span><i>¥</i>{{tyreServiceMoney.toFixed(2)}}</span>
      </p>

      </li>
      <li>
        <div class="amount">总计<span class="num"><small>¥</small>{{{sumMoney.toFixed(2)|dollarPrice}}}</span></div>
      </li>
    </ul>


      <!--优惠券-->
     <!--  <a href="####"  v-if="couponNum == 0?false:true" v-link="{path:'/ordertyre/orderchoosecoupon',query:{pathfrom:'confirm-order-tyre'}}"> -->
      <a href="javascipt:void(0)" v-link="{path:'/ordertyre/orderchoosecoupon',query:{pathfrom:'confirm-order-tyre'},replace:true}">
        <ul  class="normal-bg mt16 mb40 couponPrice">
            <li>
               <h4>
                  <span>优惠券(<em :class="{'color-f60': couponNum}">{{couponNum}}</em>张可用)</span>
                  <!--  <span class="ticket">10元现金-APP专享</span> -->
                   <span class="sf-arrow-right"></span>
                  <span v-if="couponContent=='未使用' &&　couponPrice　== ''" class="gray ticket" >{{couponContent}}</span> 
                  <span v-else class="ticket">
                      <span  v-if="couponPrice && couponPrice != '0'">{{couponContent}}<em>：- ¥ {{couponPrice}}</em></span>
                      <span v-else>未使用</span>
                  </span>
                 


              </h4>
            </li>
        </ul>
      </a>



    <!--在线支付项-->
    <div class="pay-confirm">
      <dl id="payConfirmOnline">
        <dt>
          <p>
            <span class="special-price-c" v-if="!couponPrice">在线支付订金<span class="red"><small>¥</small>{{{frontMoney.toFixed(2)|dollarPrice}}}</span></span>
             <span v-else class="special-price-c">在线支付订金<span class="red"><small>¥</small>{{{(frontMoney-couponPrice)>0?(frontMoney-couponPrice).toFixed(2):'0' | dollarPrice}}}</span></span>
         <br/>

          <span v-if="frontMoney-couponPrice>=0" class="gray s special-price-s">余额到店支付<small>¥</small>{{plusMoney.toFixed(2)}}</span>
           <span v-else class="gray s special-price-s">余额到店支付<small>¥</small>{{(plusMoney+(frontMoney-couponPrice))>0?(plusMoney+(frontMoney-couponPrice)).toFixed(2):0}}</span>

          </p>
        </dt>
        <dd>
          <input type="button" value="确认下单" class="ui-btn" @click="confirm">
        </dd>
      </dl>
    </div>
</div>
</template>
<script>

/* import storeConfirmOrder from './store-confirm-order';*/
  
  import confirmOrderCarplate from './confirm-order-carplate';
  import confirmOrderCustom from './confirm-order-custom';
  import confirmOrderStore from './confirm-order-store';
  import confirmOrderPicktime from './confirm-order-picktime';
  import loading from '../common/loading';
  import common from '../../utils/common';

  import Vue from 'vue';
  import {Toast} from 'mint-ui';
/*  import confirmOrderChoosecoupon from './confirm-order-choosecoupon';*/

  
  export default {
    components: {
      /*storeConfirmOrder,*/
      confirmOrderCarplate,
      confirmOrderCustom,
      confirmOrderStore,
      confirmOrderPicktime,
      loading
      /*confirmOrderChoosecoupon*/
    },
      data () {

        return {
          skuCodeList:decodeURI(this.$route.query.skuCodes),//skucodes参数
          storeId:"",//门店id
          fullday:sessionStorage.getItem("fullday"),
          chooseTime:sessionStorage.getItem("fullday"),
          couponNum:"0",//券数量
          onlinePrice:0,//在线支付金额
          totalAmout:0,//总金额

          /***取金额***/
          tyreMoney:"0", // 轮胎价格
          tyreServiceMoney :"0",// 轮胎服务价格
          sumMoney:"0", // 总计
          frontMoney :"0",// 定金
          plusMoney :"0",// 到店支付余额

          couponCodeList:"",//券列表
          couponContent:sessionStorage.getItem("chooseCouponContent")?sessionStorage.getItem("chooseCouponContent"):"未使用",//券内容
          carPlate:sessionStorage.getItem("choosePlate")||"沪",//牌照前缀
          plateType:this.$route.query.type?this.$route.query.type:"c",//牌照类型
          storeInfo:{},//门店信息
          typeDetail:{},//轮胎信息
          //车辆信息
          carModelInfo:{
            carName:"",
            plates:""
          },
          //轮胎服务列表
          typeDetailList:[],
          //用户信息
          userInfo:{},
          tyrenum:0,//轮胎数量
          tyreSku:"",
          skus:"",

          nowTime:'',  // 服务器当前时间
          storeName:"",//门店名称
          shoppingCart:"",//购物车
          plateText:"",//车牌内容
          couponPrice: 0,// 优惠券价格
          loadingShow: true, // Loading 图
          active: 0,//loadingactive数量
          notFound: true// 404效果显示处理
        }
      },
      watch:{
        "chooseTime":function(){
          this.initCoupon();
        }
      },
      route:{
        data:function(){
            common.setTitle('确认订单');  // 设置title
            this.carPlate = this.$route.query.name||sessionStorage.getItem("choosePlate")||"沪";
            this.plateType = this.$route.query.type || "c";
            this.couponContent = sessionStorage.getItem("chooseCouponContent") || "未使用"; // 券信息
            this.couponPrice = sessionStorage.getItem('couponPrice') || 0;

            this.tyreSku = sessionStorage.getItem("tyreSku")|| this.$route.query.tyreSku;
            this.skus = sessionStorage.getItem("skus")|| this.$route.query.skus;
            this.tyrenum = sessionStorage.getItem("tyrenum")||this.$route.query.num;


            try{
              /**** 解决 优惠券button显示***/

              document.querySelector('#submitbox').style.display = 'block';

              /**** 解决 优惠券button显示***/
            }catch(e){
              //TODO handle the exception
            }


        }
      },
      ready:function(){
          var tyreSku = this.$route.query.tyreSku,
          skus= this.$route.query.skus,
          tyrenum = this.$route.query.num;

          this.tyreSku = tyreSku;
          this.skus = skus;
          this.tyrenum = tyrenum;

          sessionStorage.setItem("tyreSku",this.$route.query.tyreSku);
          sessionStorage.setItem("skus",this.$route.query.skus);
          sessionStorage.setItem("tyrenum",this.$route.query.num);

        /********** 清除session中优惠券信息 **********/
          sessionStorage.setItem('chooseCouponContent', ''); // 优惠券 内容
          sessionStorage.setItem('couponPrice', ''); // 优惠券 价格
          sessionStorage.setItem('chooseCouponId', ''); // 优惠券 ID
         /********** 清除session中优惠券信息 **********/

          // 处理 Loading图
          Vue.http.interceptors.push(function ( request, next ) {
        
            next(function ( response ) {
              this.$nextTick(function () {
                  if (this.active == 1) {
                    this.loadingShow = false;
                    return response;
                  }
              });
            });

          });



        

            // 设置券码金额
          this.couponPrice = sessionStorage.getItem('couponPrice');
          
          console.log( this.couponPrice, 'this.couponPrice' );

          //轮胎数量        
          this.$http.post(common.isdev()+'/spu/getSelectedElementInfo.htm',{targetJumpUrl:window.location.href}).then(function(d){

            var res = typeof d.data === 'object' ? d.data : JSON.parse(d.data);      
            //console.log(JSON.stringify(res.obj),213123213123);
            if(res.result === 1){
            var shoppingCart = res.obj;

            var storeId = shoppingCart.storeInfo.storeId;            
            this.storeInfo = shoppingCart.storeInfo;
            this.carModelInfo = shoppingCart.carInfo;

            this.userInfo = res.obj.userInfo || '';
            this.storeName = res.obj.storeInfo.storeName || '';

            this.carPlate = this.$route.query.name || sessionStorage.getItem("choosePlate") || common.getPlate(this.storeInfo.provinceId);
             
            this.active += 2;

            console.info(this.storeInfo);
            console.info(this.carModelInfo);
            /**
            **订单初始化
            */
            this.$http.post(common.isdev()+'/orderPageInit/initTyre.htm',{
              //轮胎sku
              "tyreSku":this.tyreSku,

              //服务SKUS
              "serviceSkus":this.skus,

              //轮胎数量
              "num":this.tyrenum,

              //门店ID
              "storeId":storeId
            }).then(function(d){
              var res = typeof d.data === 'object' ? d.data : JSON.parse(d.data);
           
              if ( res.result === 1 ) {
                //console.log(JSON.stringify(res.obj),"res.objres.objres.obj");

                this.storeInfo = res.obj.storeInfo;
                //this.carModelInfo = res.obj.carModelInfo;
                //this.carModelInfo.carName = res.obj.carModelInfo.carName||"";
                //this.carModelInfo.plates = res.obj.carModelInfo.plates||"";
                

                //获取服务器当前时间
                this.nowTime=res.obj.currentTime;
                
                var typeDetailServiceNo = res.obj.typeDetail.serviceNo;//轮胎S码
                var typeDetailList = res.obj.typeDetailList;//轮胎服务s码

                this.$broadcast('sendTime', [this.nowTime,typeDetailList[0].serviceNo]);


                var scode = [];
                if(typeDetailList){
                  for(var i = 0,len = typeDetailList.length;i < len;i++){
                    scode.push(typeDetailList[i].serviceNo);
                  }
                }
                scode.push(typeDetailServiceNo);
                //S码 用来获取券
                this.scode = scode.join(",");
                //服务
                this.typeDetail = res.obj.typeDetail||"";
                // console.log(JSON.stringify( this.typeDetail),"this.typeDetail123132");

            
                
                //轮胎LIST
                this.typeDetailList = res.obj.typeDetailList||[];

                

                //用户信息
                this.userInfo = res.obj.userInfo;  
                console.info(this.userInfo);  

                //初始化姓名session
                if(this.userInfo.name){
                  sessionStorage.setItem('username', this.userInfo.name);
                }else{
                  sessionStorage.removeItem('username');
                }        

                //在线支付
                /*this.onlinePrice = res.obj.typeDetail.cashPrice*this.tyrenum*10000;
                this.totalAmout = (res.obj.typeDetail.cashPrice*this.tyrenum+res.obj.typeDetailList[0].cashPrice)*10000;*/

                this.tyreMoney=res.obj.tyreMoney, // 轮胎价格
                this.tyreServiceMoney =res.obj.tyreServiceMoney,// 轮胎服务价格
                this.sumMoney= res.obj.sumMoney, // 总计
                this.frontMoney=res.obj.frontMoney,// 定金
                this.plusMoney=res.obj.plusMoney,// 到店支付余额


                this.active -= 1;
                //获取券信息       
                this.initCoupon();    
                
                this.notFound = true;
              }else if ( res.result === 0 ) {
                  
                  //Toast(res.message);
                  this.notFound = false;
                  common.goNotFound(res.errorCode);
                }

                // 判断是否登陆
                if ( res.result === -99 ) {
                  common.goLogin();
                }

            }, function(err) {
               Toast(err);
            });

            this.notFound = true;
            }else if(res.result === 0){
                this.notFound = false;
                common.goNotFound(res.errorCode);
            }

            }, function(err) {
               Toast(err);
            });
      },
      methods:{ 
          //券列表  
          initCoupon:function(){
            var scode = this.scode;
            console.log(scode,"scodescodescodescode");
            this.$http.post(common.isdev()+"/orderPageInit/conponList.htm",{
                "coupons":scode,
                "tyreFlag":"true"
            }).then(function(d){
               var res = typeof d.data === 'object' ? d.data : JSON.parse(d.data);
               console.info(JSON.stringify(res),"这里是券");
               
               if ( res.result === 1 ) {
                
                  var chooseTime = new Date(this.chooseTime);
                  var availableCouponList = [];
                  
                  this.couponList = res.obj.couponList;
                  
                  for ( var i =0; i<this.couponList.length; i++ ) {
                    
                    var d = this.couponList[i].expiryEndDate.split("-")[1].replace(".","/").replace(".","/");
                    var time = new Date(d); // 过期时间
                    
//                  if ( time.getTime() >= chooseTime.getTime() ) {
                      availableCouponList.push(this.couponList[i]);
//                  }
                    
                  }
                  
                  var couponLen = availableCouponList.length;
                  
                  this.$set("couponNum", couponLen);
                  if ( couponLen == 0 ) {
                    sessionStorage.setItem('couponPrice', '');
                  }
                  
                  if ( couponLen<=0 ) {
                    this.$set("couponContent","未使用");
                  }
          
          // 在线支付 才使用券
                //  if ( payOnline.length > 0 ) {
                    sessionStorage.setItem("availableCouponList",JSON.stringify(availableCouponList));
               //   }
                 
               } else if ( res.result == 0 ){
                console.log('该用户无券');
               }
               
               // 判断登陆
               if ( res.result == -99 ) {
                  common.goLogin();
               }

                this.active -= 1;
            },function(){
               Toast('劵码列表接口请求出错');
            });
       
          },
          /**
           * 转换大写
           * @param {String} str 转换的字符串
           * @return {Mixin} Boolean String  
           */
          converToUpperCase: function ( str ) {
            if ( str ) {
              if ( !str && str == 'undefined' && str == 'null' ) {
                return false;
              }
              
              var first = str.toUpperCase();
              
              return first;
            }
          },

          /**
           * 去除字符串中的中文
           * @param {String} str 需要的字符串
           * @return {String} 去除中文和特殊字符串
           */
          removeCn: function( str ) {
            var rep = /[\u4E00-\u9FA5]|[!+|@+|#+|$+|%+|^+|&+|*+|(+|)+|,+|.+|>+|<+|/+|?+|~+|`+|,+|.+|<+|>+|/+|?+]/g;
            return str && str.replace(rep, '').toUpperCase();
          },

          /**
           * 验证用户名
           * @param {Object} nickName 当前用户名
           * @return {Boolean} 是否用户名验证成功
           * 
           * 规则： 限16个字符，支持中英文、数字、减号或下划线
           */
          checkNickName: function ( nickName ) {
            var regStr = /^[\u4e00-\u9fa5_a-zA-Z0-9-]{1,16}$/g;
            
            if ( !nickName ) {
              return false; 
            }
            
            return regStr.test(nickName);
          },
          /**
           *  去除前后空格
           * @param {String} str
           * @reutrn {String} 
           */
          trim: function ( str ) {
            if ( str ) {
            return str.replace(/(^\s*)|(\s*$)/g, "");
            }
            return '';
          },

          /**
           * 车牌验证
           */
          savePlate: function ( event ) {
//          var val = event.currentTarget.value;
            var val = this.plateText ? this.plateText : '';
            val = this.converToUpperCase(val) || '';

            var isPlate = /^[A-Z]{1}[A-Z_0-9]{5,6}$/;
            
            // 大于6位截取
            if ( val.length > 6 ) {
              val = val.substr(0, 7);

            }
            // 去除中文,特殊字符,并且转换大写
            val = this.trim(this.removeCn(val));
      
      // 验证车牌

      		if ( val.length >= 6 ) {

	          if ( !isPlate.test(val) ) {
	            Toast('车牌格式错误');
	          }
            this.plateText = val;
           }
//          sessionStorage.setItem(plates, val);
          },
          
          //提交

          confirm:function(){
            var _this = this;

              // 修改sku
           /* var skuCodeList = this.skuCodeList;

            if ( typeof skuCodeList == 'string' ) {
              skuCodeList = JSON.parse(skuCodeList);
              settleList = {quality:'1', skuCode: '["' + JSON.stringify(skuCodeList[0]) + '"]' };
            } else {
              for ( var i = 0; i<skuCodeList.length; i++ ) {
                settleList.push({quality:'1', skuCode:skuCodeList[i]});
              }
            }*/

            // 修改日期
            var curTime = '';
            if ( sessionStorage.getItem("fullday") && sessionStorage.getItem("fullday") !== 'undefined' && sessionStorage.getItem("fullday") !== 'null' ) {
              curTime = sessionStorage.getItem("fullday");
            } else {
              curTime = this.timestamp(Date.parse(new Date()));
            }
            
            var _reservationDateStr = curTime.replace(/[\u4e00-\u9fa5]/g, '/');
            if ( _reservationDateStr.substring(_reservationDateStr.length - 1) === '/' ) {
              _reservationDateStr = _reservationDateStr.substring(0, _reservationDateStr.length-1);
            }


            // 修改车牌
             var plates = '';
            // 验证是否填写正确车辆
            if ( _this.carModelInfo.plates ) {
              plates = _this.carModelInfo.plates;
            } else if( _this.plateText ) {

                var isPlate = /^[A-Z]{1}[A-Z_0-9]{5,6}$/; // 车牌正则验证

                if(!isPlate.test(_this.plateText)) {
                    Toast("车牌格式错误！");
                    return false;
                }

              plates = _this.carPlate + _this.plateText;  
              
            } else {
              Toast('请填写车牌');
              return false;
            }



             // 判断券码
            var _couponCode = sessionStorage.getItem("chooseCouponId") || '';
            if ( _couponCode == '00' ) {
              _couponCode = '';
            }

            // 修改联系人
            var contactName = '';
            var _name = this.trim(sessionStorage.getItem('username'));
            if ( _name ) { // 输入联系人
              if ( this.checkNickName(_name) ) {
                contactName = _name;
              } else {
                Toast('联系人仅限输入中英文');
                return false;
              }
            } else { // token 存在用户名
//            if ( _this.initData.userInfo.name ) {
//                contactName = _this.initData.userInfo.name;
//            } else {
                Toast('请填写联系人');
                return false;
//            }
            }



            var fedOrderVOString = JSON.stringify({

                  //结算订单商品VO 数量+skuCode mdseFlag 1为轮胎标识，2为轮胎服务标识
                  settle:[{quality:this.tyrenum,skuCode:this.typeDetail.skuCode||"",channelType:'9',mdseFlag:1,sCode:this.scode.split(",")[1]},{quality:'1',skuCode:this.typeDetailList[0].skuCode||"",channelType:'9',mdseFlag:2,sCode:this.scode.split(",")[0]}],  
                  // settle:[{quality:'1',skuCode:this.typeDetail.skuCode||"",channelType:'9'}],  

                  //订单类型   [01,线上售卡][02,普通服务][03,轮胎服务][04,洗车服务][05,套餐卡服务][06,套餐卡用卡]</p>
                  orderCommitType:"03",  

                  //车信息
                  carModelInVo:{plates:plates},

                  //联系人
                  contactName:contactName,  

                  //到店日期        
                  reservationDateStr:_reservationDateStr, 

                  //上午 下午          
                  remark:sessionStorage.getItem("remark"),  

                  //券码                 
                  coupon:{couponCode:_couponCode},

                  //门店信息       
                  storeInfo:_this.storeinfo   
 
              });




            this.$http.post(common.isdev()+'/orderFollow/orderHandle.htm',{
              fedOrderVO: fedOrderVOString
            }).then(function ( d ) {
                var res = typeof d.data === 'object' ? d.data : JSON.parse(d.data);
                // 判断是否登陆
                      if ( res.result === -99 ) {
                        common.goLogin();
                        return false;
                      }
                      
                if(res.success) {
                  // 判断是否跳转支付页面
                  if(res.statusCode == '000009') {
                    // 成功之后 不需要支付跳转路由到成功页
                    window.location.href = process.env.HOST_NAME+'/service/success.htm?orderNo='+res.orderHeadCode;
                  } else {
                    window.location.href = res.payURL;
                  }
          
                } else {
                  Toast(common.queryCodeMessage(res));
                }
  
              }, function( err ) {
              console.log(JSON.stringify(err) + '--订单提交出错');
            });
          },


          /**
           * 处理车牌第二次返回无显示
           */
          /*savePlate: function (plates, event) {
            var val = event.currentTarget.value;
            sessionStorage.setItem(plates, val);
          },*/
          
          /**
           * 处理 年月日 时间
           * @param {Object} time 事件戳
           * @return {String} 年月日时间
           * @example 2016/11/6  
           */
          timestamp: function( time ) {
            
            var date = new Date(time);
            var Y = date.getFullYear() + '/';
            var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '/';
            var D = date.getDate() + ' ';
            
            return Y + M + D;
            
          },
          
          /**
           * 判断是否为空的对象
           * @param {Object} obj
           * @return {Boolean} 
           */
          isEmptyObj: function ( obj ) {
            var num = 0;
            for ( var i in obj ) {
              num++;
            }
            return num > 0 ? true : false;
          }
      },
      events: {
        'chooseTime-dispatch'() {
           console.log("this is a dispatch events!");
           this.chooseTime = sessionStorage.getItem("fullday");
           // this.$broadcast('chooseTime-broadcast');
           // console.log(this.chooseTime);
        }
      }
  }

</script>



<style lang="scss" scoped>
  @import '../../assets/css/_functions.scss';
  @import '../../assets/css/_variables.scss';
  .gray{
    color:#8392A0;
  }
  .red{color:#f55923}
  .bgf{
    // margin-top: rem(16);
    background-color: #fff;
  }
    .normal-bg-t{
        background-color: $_fff;
        font-size:rem(14);
    }
  .normal-bg{
       background-color: $_fff;
       padding: rem(12) 0;
       margin:0 rem(20);
       font-size: rem(14);
           border-bottom: 1px solid #c9d5e0;
       i{
       margin-right: rem(5);
       }
  }
    
    .normal-bg-t {
        clear:both;
        overflow: hidden;
        height: rem(55);
        line-height: rem(55);        
        margin:0 rem(20);
        border-bottom: 1px solid #c9d5e0;
        dd{
           float:left;
        }
        dd:last-child{float: right;}    
        /* dl:last-child{
            border-bottom: 0
        }*/
    }

    ul{
        li{ 
            // border-bottom:1px solid $_dedede;
            p {color: #243742;line-height:rem(30);font-size:rem(13);}
            h3 {line-height:rem(27);}
            h4 span:last-child{font-size: rem(13);}
        }
        li:last-child{ border-bottom:0;}
    }

    ul li p span:last-child,ul li h3 span:last-child,ul li h4 span:last-child{
       float: right;
    }
    .seclect-plate-btn {
      background: #8392A0 url(../../assets/images/arrow-b.png) no-repeat rem(25) center;
      background-size: rem(9) rem(6);
      display: inline-block;
      width: rem(35);
      height: rem(24);
      border-radius: rem(4);
      line-height: rem(25);
      color: #fff;
      padding-left: rem(7);
    }
    .plate-text{
        background: none;
        border:none;
        width: rem(70);
        margin-top: rem(-4);
        margin-left: rem(7);
        color: #243742;
    }
    i{
        color: #243742;
    }
    .username-text{
        background: none;
        border:none;
        width: rem(96);
        margin-top: rem(-4);
        color: #243742;
    }
    .amount{
        height:rem(30);
        line-height:rem(30);
        text-align: right;
        padding-top: rem(5);
        padding-right: rem(15);
    }
    .tyrenum{
      color:$_price;
    }
    .num{
        color: $_price;
        font-size: rem(16);
    }
    .num small:first-child{
        margin:0 rem(5);
    }
    .mb40{
        margin-bottom: rem(80);
    }
    .no-pd-r{
        padding-right: 0;
    }
    .no-pd-r p,.no-pd-r h3{padding-right: rem(15);}
    .ticket{
      float: right;margin-right: rem(3);
      // max-width: 21rem;
      height: 1.6rem;
      overflow: hidden;
      line-height: 1.7rem;
    }
    .phone-num{
        background:transparent url(../../assets/images/phone.png) no-repeat left center;
        padding-left: rem(15);
    }
    .pd-b8{
        padding-bottom: rem(8);
    }
    .pay-confirm {
        width: rem(375);
        height:rem(70);
        background: #fafbfc;
        position: fixed;
        bottom: 0;
        /*left: 0;*/
        z-index: 10;
        border-top: 1px solid $_dedede;
        overflow: hidden;
        padding:rem(12) 0;
        -webkit-box-shadow:0 0 20px rgba(204, 204, 204, .7);  
        -moz-box-shadow:0 0 20px rgba(204, 204, 204, .7);  
        box-shadow:0 0 20px rgba(204, 204, 204, .7);  
        dl{
            dt {
                float: left;
                font-size:rem(14);
                padding-left: 2rem;
                p{
                    display: table-cell;
                    height:rem(48);
                    vertical-align: middle;
                }
                small:first-child{margin:0 rem(5)}
                .s{font-size:rem(12);}
            }
            dd{
                float: right;
            }
        }
        .ui-btn {
            width:rem(148);
            height: rem(45);
            line-height: rem(45);
            border-radius: 0;
            background-color: #ff6600;
            font-size: rem(18);
            color: #fff;
            border:none;
            border-radius:rem(5);
            margin-right:rem(20);
        }
    }
    .carname span{
      display:inline-block;
      float:left;
    }
    .carname i{
      display:inline-block;
      width:rem(260);
      overflow: hidden;
      white-space: nowrap; 
      text-overflow: ellipsis;
      text-align:right;
      color:#8392A0;
    }
    .server-car{
       // float:left!important;
       padding-right: 0!important;
       .gray{
          margin-left: rem(12);
       }
    }
    .couponPrice {
      color: $_666;
      padding:rem(19) 0;

    }
    .color-f60 {
      color: $_price;
    }
    .sf-arrow-right {
      display: inline-block;
      vertical-align: middle;
      height: rem(15);
      float: right;
      background-position: center;
      margin-top: rem(1);
    }
   
</style>
<style lang="scss">
   .special-price-c i{
      font-size: 10px !important;
    }
    .special-price-c .red{
          font-weight: bold;
    }
</style>
